import React, { useEffect, useState } from 'react'
import { HeaderWrapper, StickyWrapper, MySlide } from './style'
import { SearchOutline, UnorderedListOutline } from 'antd-mobile-icons'
import { Swiper, SwiperSlide } from 'swiper/react';
import { FreeMode } from 'swiper';
import 'swiper/css';
import { NavLink, useNavigate } from 'react-router-dom';

interface HeaderProps {
  gameList: any[],
  channelList: any[],
  discussion: {
    icon: string;
    prompt: string;
  },
  // {
  //   id: number,
  //   name: string
  // }
}

const Header: React.FC<HeaderProps> = (props) => {
  const { gameList, channelList, discussion } = props;
  const [list, setList] = useState(gameList);
  const [visible, setVisible] = useState(false);
  const [opacity, setOpacity] = useState(0);
  const navigate = useNavigate();
  // 页面滚动事件
  document.addEventListener('scroll', function () {
    // window.pageYOffset 页面被卷去的头部
    if (window.pageYOffset > 135) {
      setOpacity(1)
      if (window.pageYOffset > 215) { // 400 为页面滚到的位置，可自定义
        setVisible(true);
      } else {
        setVisible(false);
      }
    } else {
      setOpacity(window.pageYOffset / 135)
      setVisible(false);
    }
  })

  useEffect(() => {
    // (channelList.length ? channelList : gameList)
    const TrueCheck = channelList.filter(item => item.check == true || item.en_name == 'dby');
    setList(channelList.length ? TrueCheck :gameList);
  }, [gameList,channelList])

  const swiperList =
    list.map(item =>
      <SwiperSlide key={item.id}>
        <MySlide opacity={opacity} fontNumber={item.name.length}>
          <NavLink
            to=
            {`/home/${item.en_name}`}
          >
            {item.name}
          </NavLink>
        </MySlide>
      </SwiperSlide>
    )
  const sticky =
    <StickyWrapper visible={visible} className='sticky'>
      <div className='left'>
        <div className="icon">
          <img src={discussion.icon} />
        </div>
        <div className="prompt">
          {discussion.prompt}
        </div>
      </div>
      <a href="#" className="link"> 进入讨论区 &gt; </a>
    </StickyWrapper>
  return (
    <HeaderWrapper opacity={opacity}>
      <div className="navBar">
        <div className="search" onClick={() => navigate(`/search`)}>
          <SearchOutline />
        </div>
        <div className="channels">
          <Swiper
            slidesPerView='auto'
            className='mySwiper'
            // centeredSlides = {true}
            // centeredSlidesBounds={true} // 贴边
            // setWrapperSize={true} // flex调整Wrapper
            slideToClickedSlide={true}
            modules={[FreeMode]}
            freeMode={{
              enabled: true,
              momentumBounce: false
            }}
          >
            {swiperList}
          </Swiper>
        </div>
        <div className="setChannels" onClick={() => navigate(`/channels`)}>
          <UnorderedListOutline />
        </div>
      </div>
      {sticky}
    </HeaderWrapper>
  )
}

export default Header
